<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/modules/cms/front/include/taglib.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <title>首页</title>
    <meta name="decorator" content="cms_default_${site.theme}"/>
    <meta name="description" content="JeeSite ${site.description}"/>
    <meta name="keywords" content="JeeSite ${site.keywords}"/>
    <style type="text/css">
        @charset "utf-8";
        * {
            margin: 0;
            padding: 0;
        }

        .wz_17_wrapper a {
            display: block;
            color: #FFF;
            text-decoration: none;
        }

        .wz_17_flat_left {
            float: left;
        }

        .wz_17_flat_right {
            float: right;
        }

        .clfl {
            float: none;
            clear: both;
        }

        .wz_17_color_01 {
            background-color: #228981;
        }

        .wz_17_color_02 {
            background-color: #8019bf;
        }

        .wz_17_color_03 {
            background-color: #22601a;
        }

        .wz_17_color_04 {
            background-color: #1f4b89;
        }

        .wz_17_color_05 {
            background-color: #af1d42;
        }

        .wz_17_color_06 {
            background-color: #ce6619;
        }

        .wz_17_color_07 {
            background-color: #228981;
        }

        .wz_17_color_08 {
            background-color: #8019bf;
        }

        .wz_17_color_09 {
            background-color: #22601a;
        }

        .wz_17_color_010 {
            background-color: #1f4b89;
        }

        .wz_17_color_011 {
            background-color: #af1d42;
        }

        .wz_17_color_012 {
            background-color: #ce6619;
        }

        .wz_17_color_013 {
            background-color: #af1d42;
        }

        .wz_17_color_014 {
            background-color: #ce6619;
        }

        .wz_17_color_015 {
            background-color: #af1d42;
        }

        .wz_17_color_016 {
            background-color: #ce6619;
        }

        .wz_17_color_017 {
            background-color: #af1d42;
        }

        .wz_17_color_018 {
            background-color: #ce6619;
        }

        .wz_17_color_019 {
            background-color: #af1d42;
        }

        .wz_17_color_020 {
            background-color: #ce6619;
        }

        .wz_17_wrapper {
            width: 320px;
            margin-right: auto;
            margin-left: auto;
        }

        .wz_17_line {
            color: #FFF;
            font-size: 16px;
            font-family: "微软雅黑";
            background-color: #999;
            height: 103px;
            width: 100%;
            margin-bottom: 10px;
        }

        .wz_17_text {
            overflow: hidden;
            text-align: center;
            line-height: 103px;
            width: 103px;
            height: 103px;
        }

        .wz_17_img {
            overflow: hidden;
            height: 103px;
            width: 217px;
        }

        .wz_17_img img {
            width: 100%;
            min-height: 103px;
        }

        .foot_bq {
            width: 300px;
            margin: auto;
            bottom: 0;
            font-size: 12px;
            text-align: center;
            line-height: 60px;
            color: #fff;
        }

        .btn_music {
            width: 40px;
            height: 40px;
            margin: 5px 0 20px 20px;
            background: none;
            background-image: url("${ctxStaticTheme}/wz/images/wz26/music.png");
            background-size: 100%;
            background-repeat: no-repeat;
            border: none;
        }

        .btn_music.on {
            background-image: url("${ctxStaticTheme}/wz/images/wz26/musicstop.png");
        }

        /*.btn_music:hover{background-image:url(
        ${ctxStaticTheme}
        /wz/images/wz26/musichover.png);}*/
    </style>
</head>
<body>
<img id="ygj_bg_show" src="${ctxStaticTheme}/images/idx_bg.jpg"
     style="width: 100%; height: 100%; min-width: 320px; z-index: -1; position: fixed; top: 0; left: 0"/>

<div class="wz_17_wrapper" style="z-index:100;">
    <c:forEach items="${fnc:getMainNavList(site.id)}" var="category" varStatus="status">
        <c:if test="${status.index lt 20}">
            <div class="wz_17_line">
                <a href="${category.url}">
                    <div class="wz_17_text wz_17_color_0${status.index+1} wz_17_flat_${status.index % 2 eq 0 ? 'left' : 'right'}">${category.name}</div>
                    <div class="wz_17_img ">
                        <img src="${category.image}"/>
                    </div>
                </a>

                <div class="clfl"></div>
            </div>
        </c:if>
    </c:forEach>
</div>
<div class="foot_bq"></div>
</body>
</html>